<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/8/30 0030
  Time: 22:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Servlet新手学习</title>
    <link rel="stylesheet" type="text/css" href="js/EasyUI/themes/black/easyui.css">
    <link rel="stylesheet" type="text/css" href="js/EasyUI/themes/icon.css">
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="js/EasyUI/jquery.easyui.min.js"></script>
    <script>

    </script>
    <script>
        window.onload = function () {
            window.vfCode = "无效的验证码!";
            $.post("/Servlet_war_exploded/api/validation/VFAPI", function (data) {
                window.vfCode = data;
            }, "text");

        }
    </script>
</head>
<body>
<div class="easyui-panel" title="用户登陆" style="width:400px">
    <div style="padding:10px 60px 20px 60px">
        <form id="ff" method="post">
            <table cellpadding="5">
                <tr>
                    <td>用户名:</td>
                    <td><input class="easyui-textbox" type="text" name="username" data-options="required:true"></input>
                    </td>
                </tr>
                <tr>
                    <td>邮箱:</td>
                    <td><input id="email" class="easyui-textbox" type="text" name="email"
                               data-options="required:true,validType:'email'"></input></td>
                </tr>
                <tr>
                    <td>密码:</td>
                    <td><input class="easyui-passwordbox" type="password" name="password"
                               data-options="required:true"></input>
                    </td>
                </tr>
                <tr>
                    <td>验证码:</td>
                    <td><input id="eyzm" class="easyui-textbox" name="eyzm" data-options="multiline:true">
                    </td>
                </tr>
                <tr>
                    <td>Language:</td>
                    <td>
                        <select class="easyui-combobox" name="language">
                            <option value="ar">Arabic</option>
                            <option value="bg">Bulgarian</option>
                            <option value="ca">Catalan</option>
                            <option value="zh-cht" selected="selected">简体中文</option>
                            <option value="cs">Czech</option>
                            <option value="da">Danish</option>
                            <option value="nl">Dutch</option>
                            <option value="en">English</option>
                            <option value="et">Estonian</option>
                            <option value="fi">Finnish</option>
                            <option value="fr">French</option>
                            <option value="de">German</option>
                            <option value="el">Greek</option>
                            <option value="ht">Haitian Creole</option>
                            <option value="he">Hebrew</option>
                            <option value="hi">Hindi</option>
                            <option value="mww">Hmong Daw</option>
                            <option value="hu">Hungarian</option>
                            <option value="id">Indonesian</option>
                            <option value="it">Italian</option>
                            <option value="ja">Japanese</option>
                            <option value="ko">Korean</option>
                            <option value="lv">Latvian</option>
                            <option value="lt">Lithuanian</option>
                            <option value="no">Norwegian</option>
                            <option value="fa">Persian</option>
                            <option value="pl">Polish</option>
                            <option value="pt">Portuguese</option>
                            <option value="ro">Romanian</option>
                            <option value="ru">Russian</option>
                            <option value="sk">Slovak</option>
                            <option value="sl">Slovenian</option>
                            <option value="es">Spanish</option>
                            <option value="sv">Swedish</option>
                            <option value="th">Thai</option>
                            <option value="tr">Turkish</option>
                            <option value="uk">Ukrainian</option>
                            <option value="vi">Vietnamese</option>
                        </select>
                    </td>
                </tr>
            </table>
        </form>
        <div style="text-align:center;padding:5px">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="login()">登陆</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="registered()">注册</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="getVFCode()">获取验证码</a>
        </div>
    </div>
</div>
<script>
    function login() {
        var eyzm = $("#eyzm").val();
        console.log(eyzm);
        if (eyzm == window.vfCode) {
            // 验证码验证成功
            $.post("/Servlet_war_exploded/api/user/UserLoginApi", $("#ff").serialize(), function (data) {
                console.log(data);
                var JsonObj = eval(data);
                var code = JsonObj.code;
                if (code == "1") {
                    //登陆成功
                } else {
                    //登陆失败
                    alert(JsonObj.message);
                    location.reload();
                }
            }, "json");
        } else {
            // 验证码验证失败
            alert("验证码错误!");
            return;
        }
    }

    function getVFCode() {
        var useremail = $("#email").val();
        $.post("/Servlet_war_exploded/api/email/EmailApi", "useremail=" + useremail + "&tag=小正科技验证码&txt=您的登陆验证码为:" + window.vfCode);
        alert("已经成功发送验证码!");
    }

    function registered() {
        var eyzm = $("#eyzm").val();
        console.log(eyzm);
        if (eyzm == window.vfCode) {
            // 验证码验证成功
            $.post("/Servlet_war_exploded/api/user/UserRegApi", $("#ff").serialize(), function (data) {
                console.log(data);
                var JsonObj = eval(data);
                alert(JsonObj.message);
                return;
            }, "json")
        } else {
            // 验证码验证失败
            alert("验证码错误!");
            return;
        }
    }
</script>
</body>
</html>
